import React, { Component } from 'react'
// import PropTypes from 'prop-types'
import Pubsub from 'pubsub-js'
import './index.css'

/*
  Pubsub-js 这个插件就是消息发布订阅的一个非常好用的插件

    发布消息使用 Pubsub.publish('消息名'，消息数据)

    接收方： Pubsub.subscribe('消息名'，（占位符，接收的数据）=> {})

    这个消息的发布订阅和 定时器是一个原理，  都会返回一个关键id 我们可以通过 Pubsub.unsubscribe(id)来取消发布订阅
*/ 

export default class index extends Component {

  state = {
    users:[],
    status:0, // list组件的状态， 0 未输入 1正在搜索 2搜索错误 3搜索成功
    token:null
  }

  // static propTypes = {
  //   users:PropTypes.array.isRequired
  // }

  componentDidMount(){
    // 
    const token = Pubsub.subscribe('hasSearch',(msg,data)=>{
      this.setState(data)
    })
    this.setState({token})
  }

  componentWillUnmount(){
    Pubsub.unsubscribe(this.state.token)  // 取消监听发布的消息
  }

  toUserDetail = (url)=>{
    return ()=>{
      // window.location.href=url // 切换新的路由 在当前的窗口打开
      // window.open(url) // 打开新窗口 再进入指定的url
    }
  }

  render() {

    const {users,status} = this.state

    return (
      <div className="lists">
        {
          status === 0?'Enter keywords, then click search':
          status === 1?'Loadding...':
          status === 2?'搜索错误':
          users.map(user=>{
            return (
              <div onClick={this.toUserDetail(user.html_url)} key={user.id} className="items">
                <img src={user.avatar_url}  alt="avater"/>
                <span>{user.login}</span>
              </div>
            )
          })
        }
      </div>
    )
  }
}
